<template>
  <div class="sign-container">
    <div class="sign-box">
      <div class="sign-bg">
        <p class="sign-bg-begin">为您提供一站式</p>
        <p class="sign-bg-title">会议营销解决方案</p>
        <p class="sign-bg-t-gary">庞大的数据库·专业团队·全流程服务</p>

        <!-- <img src="https://img1.17img.cn/ui/simg/instrument/20220308/yxt_GIF_8M_20220704.gif" alt=""> -->
        <img
          src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/tuxing_20230202.png"
          alt=""
        />
      </div>
      <div v-if="!resetShow && !isScanningCode" class="sign-form">
        <!-- <div class="account-tab">
          <span>扫码登录在这里</span>
          <img src="https://img1.17img.cn/ui/simg/instrument/20220330/yxt_zh_eweima_20220610.png" alt="" @click="getCreatedQrCode">
        </div> -->
        <div class="form-title">
          <a
            href="javascript:;"
            :class="{ active: tabType == 2 }"
            @click="getTabType(2)"
            >验证码登录</a
          >
          <a
            href="javascript:;"
            :class="{ active: tabType == 1 }"
            @click="getTabType(1)"
            >密码登录</a
          >
        </div>
        <div class="form-box">
          <!-- 账号密码 -->
          <div
            v-if="tabType == 1"
            class="box-input"
            :class="{ error: aVerification.userAccountText }"
          >
            <input
              v-model.trim="accoutParams.userAccount"
              class="input-tel account"
              name="p-tel"
              type="text"
              placeholder="手机号/账号"
              maxlength="11"
              autocomplete="new-password"
              @input="getAInputChange"
              @keyup.13="getToLogin"
            />
            <p v-if="aVerification.userAccountText" class="error-tip">
              {{ aVerification.userAccountText }}
            </p>
          </div>
          <div
            v-if="tabType == 1"
            class="box-input"
            :class="{ error: aVerification.passwordText }"
          >
            <input
              v-model.trim="accoutParams.password"
              class="input-code"
              name="p-possword"
              :type="inputType"
              placeholder="请输入密码"
              autocomplete="new-password"
              @input="getAPasswordChange"
              @keyup.13="getToLogin"
            />
            <span
              v-if="inputType == 'password'"
              class="input-send"
              @click="inputType = 'text'"
              ><svg-icon icon-class="close-eyes"
            /></span>
            <span
              v-if="inputType == 'text'"
              class="input-send"
              @click="inputType = 'password'"
              ><svg-icon icon-class="open-eyes"
            /></span>
            <p v-if="aVerification.passwordText" class="error-tip">
              {{ aVerification.passwordText }}
            </p>
          </div>
          <!-- 验证码 -->
          <div
            v-if="tabType == 2"
            class="box-input"
            :class="{ error: !verification.mobile }"
          >
            <vue-country-intl
              ref="vueCountryIntl"
              v-model.trim="loginParams.areaCode"
              :show-label-img="false"
              readonly
              :only-value="true"
              placeholder=""
              type="phone"
              iso2
              @onChange="getChangeCountry"
            />
            <span class="line" />
            <input
              v-model.trim="loginParams.mobile"
              class="input-tel"
              type="text"
              name="c-tel"
              placeholder="请输入手机号码"
              maxlength="11"
              autocomplete="new-password"
              @input="getInputChange"
              @keyup.13="getToLogin"
            />
            <p v-if="!verification.mobile" class="error-tip">
              手机号格式不正确
            </p>
          </div>
          <div
            v-if="tabType == 2"
            class="box-input"
            :class="{ error: verification.codeText }"
          >
            <input
              v-model.trim="loginParams.code"
              class="input-code"
              type="text"
              name="c-code"
              placeholder="请输入验证码"
              autocomplete="new-password"
              @input="getCodeChange"
              @keyup.13="getToLogin"
            />
            <span v-if="timeShow" class="input-send higt" @click="getSendCode"
              >发送验证码</span
            >
            <span v-if="!timeShow" class="input-send higt count"
              >重新获取({{ count }}秒)</span
            >
            <p class="error-tip">{{ verification.codeText }}</p>
          </div>
          <div class="box-read">
            <a v-if="tabType == 1" href="javascript:;" @click="resetShow = true"
              >忘记密码</a
            >
          </div>
          <el-button
            type="primary"
            class="box-btn"
            :disabled="isToLoginBtn"
            :loading="isToLoginBtn"
            @click="getToLogin"
            >{{ !isToLoginBtn ? "登录" : "登录中..." }}</el-button
          >
          <router-link
            class="box-register"
            :to="{ path: '/login', query: { type: 'register' } }"
            >免费注册</router-link
          >
        </div>
      </div>
      <div v-if="!resetShow && !!isScanningCode" class="code-form">
        <div class="account-tab">
          <span>账号登录在这里</span>
          <img
            src="https://img1.17img.cn/ui/simg/instrument/20220330/yxt_zh_mima_20220610.png"
            alt=""
            @click="getSwitchAccount"
          />
        </div>
        <p class="code-title">扫码登录厂商后台</p>
        <div v-if="!isConfirm" class="code-box">
          <img :src="`data:image/png;base64,${qrcodeBase64}`" alt="" />
          <div v-if="isInvalid" class="code-invalid">
            <span class="invalid-title">二维码已失效</span>
            <el-button
              class="invalid-btn"
              type="primary"
              size="mini"
              @click="getCreatedQrCode"
              >刷新</el-button
            >
          </div>
          <p>打开掌上<a href="javascript:;">仪信通 APP</a></p>
          <p>在「首页」顶部打开扫一扫</p>
        </div>
        <div v-if="isConfirm" class="code-confirm-ing">
          <svg-icon class-name="confirm-sao-icon" icon-class="confirm-sao" />
          <p class="confirm-succ">扫描成功！</p>
          <p class="confirm-succ-gary">请在手机端确认</p>
          <p class="confirm-succ-back" @click="getCreatedQrCode">
            返回重新扫码
          </p>
        </div>
      </div>
      <reset-account v-if="resetShow" @getChangeSignType="getChangeTypeData" />
    </div>
  </div>
</template>
<script>
import api from "@/api";
import VueCountryIntl from "vue-country-intl";
import "vue-country-intl/lib/vue-country-intl.css";
import { checkLoginPhone, debounce } from "@/utils/validate";
import resetAccount from "./resetAccount.vue";
export default {
  name: "Sign",
  components: { VueCountryIntl, resetAccount },
  data() {
    return {
      inputType: "password",
      isInvalid: false, // 二维码失效
      isConfirm: false, // 监听手机扫码
      isToLoginBtn: false,
      tabType: 2,
      resetShow: false,
      isScanningCode: false,
      accoutParams: {
        // 密码登录
        userAccount: "",
        password: "",
        loginSource: "137",
      },
      aVerification: {
        userAccountText: "",
        passwordText: "",
      },
      loginParams: {
        // 验证码登录
        mobile: "", // 手机号
        areaCode: "86",
        code: "",
        loginSource: "137",
      },
      verification: {
        mobile: true,
        codeText: "",
      },
      timeShow: true,
      count: "",
      timer: null,
      qrcodeBase64: "",
      checkQrCodeValidity: "", // 轮询二维码过期
      qrCodeTimer: null,
    };
  },
  mounted() {
    // 埋点
    // this.$sensors.registerPage({
    //   sensorsdata_platform_type: "PC",
    //   sensorsdata_column_name: "仪信通",
    // });
    // this.$sensors.track("sensorsdata_yixintong_event", {
    //   $screen_name: `PC-仪信通-厂商登录页`,
    //   $is_first_time: true,
    //   $url: window.location.href,
    //   $referrer: this.$sensors.getPresetProperties().$referrer,
    // });
  },
  methods: {
    getTabType(type) {
      const _this = this;
      _this.tabType = type;
      if (type === 2) {
        _this.accoutParams = _this.$options.data().accoutParams;
        _this.aVerification = _this.$options.data().aVerification;
        _this.loginParams = _this.$options.data().loginParams;
        _this.verification = _this.$options.data().verification;
      } else {
        _this.accoutParams.userAccount = _this.loginParams.mobile
          ? _this.loginParams.mobile
          : "";
      }
    },
    getChangeTypeData(data) {
      this.resetShow = data;
    },
    getChangeCountry(data) {
      const _this = this;
      _this.loginParams.areaCode = data.dialCode;
    },
    // 密码登录-校验手机号、账号
    getAInputChange: debounce(function () {
      const _this = this;
      if (!_this.accoutParams.userAccount) {
        _this.aVerification.userAccountText = "请输入手机号/账号";
      } else {
        _this.aVerification.userAccountText = "";
      }
    }, 300),
    // 密码登录-密码
    getAPasswordChange: debounce(function () {
      const _this = this;
      if (!_this.accoutParams.password) {
        _this.aVerification.passwordText = "请输入密码";
      } else {
        _this.aVerification.passwordText = "";
      }
    }, 300),
    getCodeChange: debounce(function () {
      const _this = this;
      if (_this.loginParams.code === "") {
        _this.verification.codeText = "请输入验证码";
      } else {
        _this.verification.codeText = "";
      }
    }, 200),
    getInputChange: debounce(function () {
      const _this = this;
      _this.verification.mobile = checkLoginPhone(_this.loginParams.mobile);
    }, 500),
    async getSendCode() {
      const _this = this;
      _this.verification.mobile = checkLoginPhone(_this.loginParams.mobile);
      if (!_this.verification.mobile) return false;
      const params = {
        areaCode: "+" + this.loginParams.areaCode,
        mobile: _this.loginParams.mobile,
        type: 0, // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      };
      const { code } = await api.login.sendMobileCode(params);
      if (code === 200) {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timeShow = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.timeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    async getToLogin() {
      const _this = this;
      if (_this.tabType === 1) {
        if (!_this.accoutParams.userAccount)
          return (
            (_this.aVerification.userAccountText = "请输入手机号/账号"), false
          );
        if (!_this.accoutParams.password)
          return (_this.aVerification.passwordText = "请输入密码"), false;

        const params = _this.accoutParams;
        const lsCodeMap = JSON.parse(localStorage.getItem("codeMap"));
        if (lsCodeMap) {
          params["codeMap"] = lsCodeMap;
        }
        _this.isToLoginBtn = true;
        try {
          const { code } = await api.login.accountLogin(params);
          if (code === 200) {
            _this.$router.push({ path: "/surey" });
            _this.isToLoginBtn = false;
          }
        } catch (error) {
          _this.isToLoginBtn = false;
        }
      } else {
        if (!_this.loginParams.mobile)
          return (_this.verification.mobile = false), false;
        if (!_this.loginParams.code)
          return (_this.verification.codeText = "请输入验证码"), false;
        _this.isToLoginBtn = true;
        try {
          if (_this.loginParams.areaCode.indexOf("+") === -1) {
            _this.loginParams.areaCode = "+" + _this.loginParams.areaCode;
          }
          await api.login.mobileRegister(_this.loginParams);
          let { data } = await api.login.getUserAuthority();
          if (data.authorityStatus == 4) {
            _this.isRegister = false;
            localStorage.setItem("RMobile", _this.loginParams.mobile);
            this.$router.push('/login?type=information&new=1')
          } else {
            _this.$router.push({ path: "/surey" });
          }

          _this.isToLoginBtn = false;
        } catch (error) {
          _this.isToLoginBtn = false;
        }
      }
    },
    // 切换扫码登录--生成二维码
    async getCreatedQrCode() {
      const _this = this;
      _this.isInvalid = false;
      clearInterval(this.qrCodeTimer);
      const params = {
        action: "login",
        // serverAddr: returnCitySN['cip']
      };
      const { data, message } = await api.login.createCodeImg(params);
      _this.qrcodeBase64 = data;
      _this.checkQrCodeValidity = message;
      _this.isScanningCode = true;
      _this.isConfirm = false;
      _this.qrCodeTimer = setInterval(() => {
        this.getcheckQrCodeValidity();
      }, 2000);
    },
    // 切换账号登陆
    getSwitchAccount() {
      const _this = this;
      _this.isScanningCode = false;
      clearInterval(this.qrCodeTimer);
    },
    async getcheckQrCodeValidity() {
      const params = {
        code: this.checkQrCodeValidity,
        type: 2,
      };
      const { code } = await api.login.checkQrCodeValidity(params);
      switch (code) {
        case 202:
          this.isInvalid = true;
          clearInterval(this.qrCodeTimer);
          break;
        case 205:
          this.isConfirm = true;
          break;
        case 200:
          clearInterval(this.qrCodeTimer);
          this.$router.push("/dashboard");
          break;

        default:
          break;
      }
    },
    async getQrCodeLoginLog() {
      const params = {
        code: this.checkQrCodeValidity,
        type: 2,
      };
      const { code } = await api.login.qrCodeLoginLog(params);
      if (code === 202) {
        clearInterval(this.qrCodeTimer);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/index.scss";
input[type="password"]::-ms-reveal {
  display: none; // 隐藏input type=password时，浏览器自带的小眼睛
}
.sign-container {
  width: 100%;
  min-width: 1200px;
  position: relative;
  background: url(https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/bej_1x_20220302.png)
    no-repeat;
  background-size: cover;
  min-height: 100%;
  .sign-box {
    width: 1130px;
    padding: 5% 0;
    box-sizing: border-box;
    margin: 0 auto;
    @include flex(row, flex-start, space-between);

    .sign-bg {
      width: 45%;
      .sign-bg-title {
        font-size: 50px;
        letter-spacing: 8.5px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 59px;
        margin-bottom: 6px;
        margin-left: -5px;
      }
      .sign-bg-t-gary {
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 9px;
        color: #a7b0c4;
        margin-bottom: 30px;
      }
      .sign-bg-begin {
        font-size: 24px;
        color: #4f5862;
        line-height: 28px;
        margin-bottom: 27px;
        letter-spacing: 5px;
      }
      img {
        width: 100%;
      }
    }
    .sign-form {
      width: 480px;
      height: 510px;
      margin-top: 64px;
      background-color: #fff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
      padding: 73px 40px 40px;
      box-sizing: border-box;
      position: relative;

      .account-tab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 72px;

        span {
          font-size: 14px;
          color: #ff6332;
          padding: 7px 12px;
          background: #fff4f0;
          display: inline-block;
          border: 1px solid #ff6332;
          border-radius: 4px;
          margin-top: 21px;
          margin-left: 273px;
          position: relative;

          &::after {
            content: "";
            width: 10px;
            height: 10px;
            border: 1px solid #ff6332;
            border-radius: 2px;
            border-left: none;
            border-bottom: none;
            position: absolute;
            right: -6px;
            top: 9px;
            margin-right: 0px;
            margin-bottom: 0px;
            background: #fff4f0;
            transform: rotate(45deg);
          }
        }
        img {
          position: absolute;
          top: 0;
          right: 0;
          width: 72px;
          height: 72px;
          cursor: pointer;
        }
      }

      .form-title {
        width: 100%;
        margin-bottom: 45px;

        a {
          display: inline-block;
          padding-bottom: 14px;
          margin-right: 40px;
          font-size: 24px;
          color: #7e8790;
          position: relative;
          font-weight: bold;

          &.active {
            color: #000;

            &::after {
              content: "";
              width: 100%;
              height: 4px;
              background: #0c7ff2;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .form-box {
        width: 400px;

        .box-input {
          width: 100%;
          height: 54px;
          background: #f7f8fa;
          border: 1px solid #f7f8fa;
          margin-bottom: 32px;
          padding: 18px 24px 18px 12px;
          box-sizing: border-box;
          position: relative;
          @include flex(row, center, space-between);

          input {
            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus,
            &:-webkit-autofill:active {
              -webkit-box-shadow: 0 0 0 1000px #f7f8fa inset !important;
            }
          }

          &.error {
            border: 1px solid #e53917;

            .error-tip {
              position: absolute;
              bottom: -25px;
              left: 0;
              font-size: 12px;
              color: #e53917;

              & > a {
                font-size: 12px;
                color: #4f5862;
                text-decoration: underline;
              }
            }
          }

          .input-num {
            font-size: 16px;
            color: #000;
            margin-right: 18px;
            line-height: 1;
          }
          &::v-deep .vue-country-intl {
            width: 50px;
            font-size: 16px;
            color: #000;
            line-height: 1;

            .vue-country-list-wrap {
              width: 500px;
            }

            .country-intl-input-wrap {
              border: none;
              border-radius: 0;

              .dropdown-flag {
                display: none;
              }

              .country-intl-input {
                padding: 0;
                height: auto;
                background: #f7f8fa;
              }

              .country-intl-label {
                padding: 0;
                background: transparent;
                height: inherit;
                line-height: 1;
                font-size: 16px;
              }
            }
          }
          .line {
            width: 1px;
            height: 18px;
            display: inline-block;
            vertical-align: middle;
            background-color: rgba(185, 192, 199, 0.4);
          }
          .input-tel {
            width: 87%;
            padding-left: 15px;
            position: relative;
            background: #f7f8fa;
            list-style: none;
            border: none;
            outline: none;
            color: #000;

            &.account {
              padding-left: 0;
            }

            ::-webkit-input-placeholder,
            ::-moz-placeholder,
            -ms-input-placeholder {
              color: #b9c0c7;
            }
          }
          .input-code {
            width: 66%;
            position: relative;
            background: #f7f8fa;
            list-style: none;
            border: none;
            outline: none;
            color: #000;
            margin-left: 5px;

            ::-webkit-input-placeholder,
            ::-moz-placeholder,
            -ms-input-placeholder {
              color: #b9c0c7;
            }
          }
          .input-send {
            width: 33%;
            color: #74808b;
            font-size: 16px;
            cursor: pointer;
            display: block;
            text-align: right;

            &.higt {
              color: #74808b;
            }

            &.count {
              cursor: inherit;
            }

            &:hover {
              opacity: 0.8;
            }
          }
        }
        .box-read {
          width: 100%;
          height: 20px;
          color: #7e8790;
          font-size: 16px;
          margin: 20px 0;
          @include flex(row, center, flex-end);
          a {
            transition: 0.3s;
            &:hover {
              opacity: 0.8;
            }
          }
        }
        .box-btn {
          width: 100%;
          padding: 16px 0 !important;
          background: #1e84fc;
          font-size: 18px;
          color: #ffffff;
          line-height: 1;
          margin-bottom: 32px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: 0.2s;
          &:hover {
            opacity: 0.8;
          }
        }
        .box-register {
          width: 80px;
          display: block;
          margin: 0 auto;
          font-size: 16px;
          color: #0c7ff2;
          text-align: center;
          transition: 0.2s;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .code-form {
      width: 480px;
      height: 510px;
      margin-top: 28px;
      background-color: #fff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
      padding: 73px 40px 40px;
      box-sizing: border-box;
      position: relative;

      .account-tab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 72px;

        span {
          font-size: 14px;
          color: #ff6332;
          padding: 7px 12px;
          background: #fff4f0;
          display: inline-block;
          border: 1px solid #ff6332;
          border-radius: 4px;
          margin-top: 21px;
          margin-left: 273px;
          position: relative;

          &::after {
            content: "";
            width: 10px;
            height: 10px;
            border: 1px solid #ff6332;
            border-radius: 2px;
            border-left: none;
            border-bottom: none;
            position: absolute;
            right: -6px;
            top: 9px;
            margin-right: 0px;
            margin-bottom: 0px;
            background: #fff4f0;
            transform: rotate(45deg);
          }
        }
        img {
          position: absolute;
          top: 0;
          right: 0;
          width: 72px;
          height: 72px;
          cursor: pointer;
        }
      }
      .code-title {
        font-size: 24px;
        text-align: center;
        color: #202933;
        margin: 35px auto 20px;
        font-weight: bold;
      }
      .code-box {
        width: 208px;
        margin: 0 auto;
        position: relative;
        img {
          width: 208px;
          height: 208px;
          margin-bottom: 40px;
        }
        .code-invalid {
          width: 208px;
          height: 208px;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          left: 0;
          top: 0;
          z-index: 9;
          .invalid-title {
            font-size: 14px;
            color: #fff;
            display: block;
            font-weight: 400;
            margin: 80px auto 20px;
            text-align: center;
          }
          .invalid-btn {
            display: block;
            margin: 0 auto;
            background: #ff6332;
            font-size: 18px;
            font-weight: 400;
            border: 1px solid #ff6332;
            padding: 5px 16px;

            &:hover {
              opacity: 0.9;
            }
          }
        }
        p {
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #4f5862;
          line-height: 1.5;

          a {
            color: #ff6332;
          }
        }
      }
      .code-confirm-ing {
        width: 208px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        .confirm-sao-icon {
          font-size: 100px;
          color: #ff6332;
          margin: 38px auto;
        }
        .confirm-succ {
          font-size: 20px;
          color: #4f5862;
          font-weight: 500;
          line-height: 1;
          margin: 15px auto;
          text-align: center;
        }
        .confirm-succ-gary {
          font-size: 16px;
          color: #7e8790;
          line-height: 1;
          font-weight: 400;
          margin: 15px auto 55px;
          text-align: center;
        }
        .confirm-succ-back {
          font-size: 16px;
          color: #ff6332;
          line-height: 1;
          font-weight: 400;
          margin: 55px auto 0;
          text-align: center;
          cursor: pointer;
          transition: 0.3s;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
